<template>
  <div>
    <el-menu
        style="min-height: calc(100vh - 50px)"
        default-active="shopping"
        router
        :default-openeds="[1]"
        class="el-menu-vertical-demo"
    >
      <el-menu-item index="shopping" style="width: 150px">商品页面</el-menu-item>
      <el-menu-item index="cartgoods" >购物车</el-menu-item>
      <el-menu-item index="goods" v-if="user.power === 1">商品管理</el-menu-item>
      <el-menu-item index="user" v-if="user.power === 1">用户管理</el-menu-item>
    </el-menu>
  </div>
</template>
//定义高亮为shopping，点击其他页面是高亮再切换为当前所在页面；定义四个选项：商店页面、购物车、商品管理、用户管理。分别对应shopping.vue , cartgoods.vue , goods.vue , user.vue


<script>
export default {
  name: "Aside",
  data() {
      user: {}  //

  },
  created() {
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)

//定义user数据。打开页面时通过sessionstorage提取用户信息，若用户的权力power为1时，代表其为管理员。通过v-if实现用户管理页面和商品管理页面只对管理员显示。实现了权限控制功能。普通用户只拥有浏览商品和加入购物车购买商品的功能。
  },
}
</script>

<style scoped>

</style>